<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var t_pagestart = new Date().getTime();
</script>
<script src="../../boomerang.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: '10.0.0.1',
		BW: {
			base_url: '../../images/',
			cookie: 'HOWTO-BA'
		},
		RT: {
			cookie: 'HOWTO-RT'
		}
	});
BOOMR.plugins.RT.setTimer("t_js", new Date().getTime() - t_pagestart).
		startTimer("t_head");
</script>
<title>Boomerang Howto #4: Measure more than just page load time</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
<script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_head").
		startTimer("t_body");
</script>
</head>
<body>
<span style="float:right;"><a href="../">All Docs</a> | <a href="index.html">Index</a></span>
<h1>Boomerang Howto #4: Measure more than just page load time</h1>
<p>
See <a href="../use-cases.html#uc-4">use case #4</a> for a description of this requirement.
</p>
<p>
Up until now we've measured the time it takes for a page to become usable by the user.  It may also be
useful to measure the time it took for various components within the page to load and match that up with
the full page load time.  boomerang provides additional timers that you can configure to measure separate
parts of your page.  You use the <code>startTimer()</code> and <code>endTimer()</code> methods of the
roundtrip (<code>BOOMR.plugin.RT</code>) plugin to do this.
</p>

<p>
In the following examples, you'll need to make sure that <code>boomerang.js</code> is loaded and the
<code>init()</code> method called before you call any of these methods, so perhaps putting it at the
top of your page is a good idea.  We'll see later how to work around this.
</p>

<p>
First, identify sections of your page that you want to measure.  Call <code>startTimer()</code> before
and <code>endTimer()</code> after.  Each timer has its own name.  The names are free-form strings,
but stay simple to be efficient.  Stick to alphanumeric characters and underscores, and limit names
to around 5 characters, eg: <code>t_ads</code>, <code>t_head</code>, <code>t_js</code>.  The following
names are reserved: <code>t_done</code>, <code>t_page</code>, <code>t_resp</code>.
</p>

<p>
Make sure you've included boomerang.js before starting the timers.
</p>

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      BOOMR.init({
		beacon_url: "http://yoursite.com/path/to/beacon.php"
      });
      <em>BOOMR.plugins.RT.startTimer("t_head");</em>
    &lt;/script&gt;
    &lt;title&gt;page title&lt;/title&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../boomerang-docs.css"&gt;
    &lt;script type="text/javascript"&gt;
      <em>BOOMR.plugins.RT.endTimer("t_head").startTimer("t_body");</em>
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    page body here
    &lt;script type="text/javascript"&gt;
      <em>BOOMR.plugins.RT.endTimer("t_body");</em>
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>
Your timers will now be included in the beacon along with <code>t_done</code>.
</p>

<p>
Notice in the second invocation how we chain the calls to <code>endTimer</code> and <code>startTimer</code>.
This is possible for most methods that you call since they return a reference to the object.  Note
that the timer methods are run on the <code>BOOMR.plugins.RT</code> object, so they return a reference
to that object and not to the <code>BOOMR</code> object.
</p>

<h2>Measuring time for content loaded before boomerang</h2>
<p>
Now we've said for years that putting javascript at the bottom of your document is good for
performance, so asking you to load boomerang at the top may not be the best advice.  You can
still measure in-page times though, and then report them to boomerang once it has loaded.
You do this using the <code>BOOMR.plugins.RT.setTimer()</code> method.  This method takes
two parameters &mdash; the timer name and its value in milliseconds.  The code above will
change to this:
</p>

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript"&gt;
      <em>var t_pagestart=new Date().getTime();</em>
    &lt;/script&gt;
    &lt;title&gt;page title&lt;/title&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
    &lt;script type="text/javascript"&gt;
      <em>var t_headend = new Date().getTime();</em>
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    page body here
    &lt;script type="text/javascript"&gt;
      <em>var t_jsstart = new Date().getTime();</em>
    &lt;/script&gt;
    &lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      BOOMR.init({
		beacon_url: "http://yoursite.com/path/to/beacon.php"
      });
      <em>var t_bodyend = new Date().getTime();                        </em>
      <em>BOOMR.plugins.RT.setTimer("t_head", t_headend - t_pagestart).</em>
      <em>                 setTimer("t_body", t_bodyend - t_headend).  </em>
      <em>                 setTimer("t_js", t_bodyend - t_jsstart);    </em>
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p class="perma-link">
The latest code and docs is available on <a href="http://github.com/lognormal/boomerang/">github.com/lognormal/boomerang</a>
</p>

<p id="results">
</p>
<script type="text/javascript">
BOOMR.plugins.RT.startTimer("t_howtojs");
</script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.plugins.RT.endTimer("t_howtojs").endTimer("t_body");
</script>
</body>
</html>
